<#-- @ftlvariable name="categories" type="java.util.List<model.Category>" -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="${base}/scripts/vue.min.js"></script>
    <script src="${base}/scripts/jquery.min.js"></script>
    <link rel="stylesheet" href="/styles/semantic.min.css">
    <title>分类列表</title>

</head>
<body>
<div class="ui sixteen wide column">
    <div class="ui basic segment">
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <#list categories as category>
                <tr>
                    <td>${category.id}</td>
                    <td>${category.name}</td>
                    <td><a href="/category/modify/${category.id}">Modify</a> | <a href="/category/delete/${category.id}">Delete</a> </td>
                </tr>
                </#list>
            </tbody>
        </table>
        <div>
            <td><a href="/category/add">Add Category</a></td>
        </div>
    </div>
</div>
</body>
</html>